<meta charset="UTF-8">
<body>
    <h1>0</h1>
</body>

<script>
    setInterval(function(){
        var fontObj = document.createElement('div')
        fontObj.className = 'font'
        var min = 0
        var max = 25
        var index = Math.floor(Math.random()*(max-min+1)+min)

        fontObj.innerText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')[index]


        var leftMin = 0
        var leftMax = window.innerWidth || document.documentElement.clientWidth
        var left = Math.floor(Math.random()*(leftMax-leftMin+1)+leftMin)
        var topMin = 0
        var topMax = window.innerHeight|| document.documentElement.clientHeight
        var top = Math.floor(Math.random()*(topMax-topMin+1)+topMin)
        fontObj.style.position = 'absolute'
        fontObj.style.left = left + 'px'
        fontObj.style.top = top + 'px'

        document.body.appendChild(fontObj)
    },1000)


    document.body.onkeyup = function (evt){

        var e = evt || window.event
        var target = e.target || e.srcElement
        var fontObjs = document.querySelectorAll('div')
        fontObjs.forEach(function(item){
            if(item.innerText.toLowerCase() === e.key.toLowerCase()){
                document.body.removeChild(item)
                var sum = parseInt(document.querySelector('h1').innerText)
                document.querySelector('h1').innerText = sum+1
            }
        })
    }
</script>